<template>
	<view class="page-box">
		<scroll-view scroll-y="true" class="menu-left">
			<view :class="{'active' : publishOrNot}" @click="publish">已发布</view>
			<view :class="{'active' : commitOrNot}" @click="commit">已提交</view>
			<view :class="{'active' : waitVerifyOrNot}" @click="verify">待审核</view>
			<view :class="{'active' : waitCorrectOrNot}" @click="correct">待修改</view>
			<view :class="{'active' : takeOffOrNot}" @click="takeoff">已下架</view>
			<view :class="{'active' : collectionOrNot}" @click="collection">收藏</view>
		</scroll-view>
		<view class="menu-right">
			<view class="list-menue">
				<view :class="{'active' : newHouse}" @click="_newHouse"><text>新房</text></view>
				<view :class="{'active' : secondHouse}" @click="_secondHouse"><text>二手房</text></view>
				<view :class="{'active' : rentHouse}" @click="_rentHouse"><text>租房</text></view>				
			</view>
			<scroll-view scroll-y="true" class="list-contain" @scrolltoupper="upper" @scrolltolower="lower">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(item, index) in swipeList" :options="item.options" :key="index" @change="swipeChange" @click="swipeClick($event, item, index)">
						<view class="list-box">
							<view class="list-title">
								<view>
									<text>{{ item.list.title }}</text>
									<text>{{ item.list.house }}</text>
								</view>
								{{ item.list.roud }}
							</view>
							<view>
								<view>
									发布人：{{ item.list.fbr }}
									<text v-if="waitVerifyOrNot" class="list-type" @click="__turnPage(index)">去审核</text>
									<text v-if="waitCorrectOrNot" class="list-type" @click="___turnPage(index)">去修改</text>
									<text v-if="takeOffOrNot" class="list-type">已下架</text>
									<text v-if="commitOrNot" class="list-type">审核中</text>
								</view>
								<view>卖方经纪人：{{ item.list.mfjjr }}</view>
								<view>
									更新时间：{{ item.list.time }}
									<text class="more-btn" @click="fnPop(item)">更多记录>></text>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</scroll-view>
			<!-- 发布按钮 -->
			<image @click="_turnPage('house/publishType')" class="btn-fb" src="../../static/btn_fb.png" mode="widthFix"></image>
			<uni-popup ref="showtip" :mask-click="false">
				<view class="uni-tip">
					<view class="uni-box">
						<view>上传时间：<text>{{commit_time}}</text></view>
						<view>审核时间：<text>{{verify_time}}</text></view>
						<view>发布时间：<text>{{release_time}}</text></view>
					</view>
					<view class="uni-tip-group-button">
						<text class="uni-tip-button" @click="fnCancel('tip')">取消</text>
						<text class="uni-tip-button" @click="fnCancel('tip')">确定</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import store from '@/store/store.vue'
import Vue from 'vue'
export default {
	onLoad(){
		// 查询已发布的数据
	},
	onShow(){
		this.getHouseListByUser()
	},
	components: {
		uniPopup
	},
	data() {
		return {
			// 1 新房 2 二手房 3 租房
			type_of_house_source: 1,
			// 1 已发布 2 已提交  3待修改 4已下架
			query_status: 1,
			typesOfHouseSource: 1,
			houseStatus: 1, // 1 2 3 4 5 6 分别对应 发布，提交 审核 修改 下架 收藏
			publishOrNot: true,
			commitOrNot: false,
			waitVerifyOrNot: false,
			waitCorrectOrNot: false,
			takeOffOrNot: false,
			collectionOrNot: false,
			newHouse: true,
			secondHouse: false,
			rentHouse: false,
			commit_time: '',
			verify_time: '',
			release_time: '',
			swipeList: [],
			house_message: [],
			user_id:0
		};
	},
	methods: {
		getHouseListByUser(){
			let _this = this
			let status = ''
			switch(_this.query_status){
				case 1:
					status = 'released'
				break;
				case 2:
					status = 'committed'
				break;
				case 3:
					status = 'corrected'
				break;
				case 4:
					status = 'takeoff'
				break;
			}			
			uni.request({
			    url: store.url + '/house/list/user?user_id=' + getApp().globalData.user_id + '&house_source_type=' + _this.type_of_house_source + '&status=' + status,
				method: 'GET',			    
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {		
					console.log(res)
					if(res.data.status == 'success'){
						_this.swipeList = []
						let array = res.data.message
						_this.house_message = res.data.message
						let swipeList = []
					
						for(let i = 0; i < array.length; i++){		
								console.log(array[i])
							let arr = array[i].house_layout.split(';')
						    array[i].house_layout = arr[0] + '室' + arr[1] + '厅' + arr[2] + '卫'
							let newObj = {
								options: [
									{
										text: '取消'
									},
									{
										text: '下架',
										style: {
											backgroundColor: '#f13b32'
										}
									}
								],
								list: {
									title: array[i].building_name == undefined ? array[i].community_name : array[i].building_name,
									house: array[i].house_layout,
									roud: array[i].address,
									fbr: getApp().globalData.user_name,
									mfjjr: getApp().globalData.inviter_name,
									time: array[i].update_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].update_timestamp)*1000),
									commit_time: array[i].commit_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].commit_timestamp)*1000),
									verify_time: array[i].verify_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].verify_timestamp)*1000),
									release_time: array[i].release_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].release_timestamp)*1000),
									house_id: array[i].house_id,
									house_source_id: array[i].house_source_id,
									user_id: array[i].user_id
								}
							}
							swipeList.push(newObj)
						}
						_this.swipeList = swipeList
					}										        
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});	
		},
		// TODO 修改
		getHouseListByInviter(){		
			let _this = this
			uni.request({				
			    url: store.url + '/house/list/inviter?inviter_id=' + getApp().globalData.user_id + '&house_source_type=' + _this.type_of_house_source,
				method: 'GET',			    
			    header: {
					"content-type": "application/json;charset=utf-8"						
			    },
			    success: (res) => {		
					console.log(res)					
					if(res.data.status == 'success'){
						_this.swipeList = []
						let array = res.data.message
						_this.house_message = res.data.message
						let swipeList = []
						for(let i = 0; i < array.length; i++){		
							let arr
							if(array[i].house_layout != undefined){
								arr = array[i].house_layout.split(';')
								array[i].house_layout = arr[0] + '室' + arr[1] + '厅' + arr[2] + '卫'
							}							
							let newObj = {
								options: [
									{
										text: '取消'
									},
									{
										text: '下架',
										style: {
											backgroundColor: '#f13b32'
										}
									}
								],
								list: {
									title: array[i].building_name,
									house: array[i].house_layout,
									roud: array[i].address,
									fbr: array[i].user_name,
									mfjjr: getApp().globalData.user_name,
									time: array[i].update_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].update_timestamp)*1000),
									commit_time: array[i].commit_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].commit_timestamp)*1000),
									verify_time: array[i].verify_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].verify_timestamp)*1000),
									release_time: array[i].release_timestamp == 0 ? '' : Vue.prototype.dateFormat(parseInt(array[i].release_timestamp)*1000),								
								}
							}
							swipeList.push(newObj)
						}
						_this.swipeList = swipeList		
					}
			    },
				fail: (res)=>{
					uni.showModal({
					    title: '提示',
					    content: '访问服务器失败: ' + res.data.message
					});						
				}
			});
		},
		_turnPage(_url){
			if(getApp().globalData.isLogin === false){
				uni.showModal({
				    title: '提示',
				    content: '请先登陆'
				});	
			}else if(getApp().globalData.user_id === 0){
				uni.showModal({
				    title: '提示',
				    content: '请先认证'
				});	
			}else{
				uni.navigateTo({
					url: '/pages/' + _url
				})
			}
		},		
		publish(){
			this.publishOrNot = true
			this.commitOrNot = false
			this.waitVerifyOrNot = false
			this.waitCorrectOrNot = false
			this.takeOffOrNot = false
			this.collectionOrNot = false
			this.houseStatus = 1
			this.query_status = 1			
			this.getHouseListByUser()
			this.isVerified = false
		},
		commit(){
			this.publishOrNot = false
			this.commitOrNot= true
			this.waitVerifyOrNot= false
			this.waitCorrectOrNot= false
			this.takeOffOrNot= false
			this.collectionOrNot= false
			this.houseStatus = 2
			this.query_status = 2			
			this.getHouseListByUser()
			this.isVerified = false
		},
		verify(){
			this.publishOrNot = false
			this.commitOrNot= false
			this.waitVerifyOrNot= true
			this.waitCorrectOrNot= false
			this.takeOffOrNot= false
			this.collectionOrNot= false			
			this.isVerified = true
			this.getHouseListByInviter()
		},
		correct(){
			this.publishOrNot = false
			this.commitOrNot= false
			this.waitVerifyOrNot= false
			this.waitCorrectOrNot= true
			this.takeOffOrNot= false
			this.collectionOrNot= false
			this.houseStatus = 4
			this.query_status = 3
			this.getHouseListByUser()
			this.isVerified = false
		},
		takeoff(){
			this.publishOrNot = false
			this.commitOrNot= false
			this.waitVerifyOrNot= false
			this.waitCorrectOrNot= false
			this.takeOffOrNot= true
			this.collectionOrNot= false
			this.houseStatus = 5
			this.query_status = 4
			this.getHouseListByUser()
			this.isVerified = false
		},
		collection(){
			this.publishOrNot = false
			this.commitOrNot= false
			this.waitVerifyOrNot= false
			this.waitCorrectOrNot= false
			this.takeOffOrNot= false
			this.collectionOrNot= true
			this.houseStatus = 6
			this.request(6, this.typesOfHouseSource)
		},
		_newHouse(){
			this.typesOfHouseSource = 1
			this.newHouse = true
			this.secondHouse = false
			this.rentHouse = false
			this.type_of_house_source = 1
			if(this.isVerified == true){
				this.getHouseListByInviter()
			}else{
				this.getHouseListByUser()
			}			
		},
		_secondHouse(){
			this.typesOfHouseSource = 2
			this.newHouse = false
			this.secondHouse = true
			this.rentHouse = false
			this.type_of_house_source = 2
			if(this.isVerified == true){
				this.getHouseListByInviter()
			}else{
				this.getHouseListByUser()
			}
		},
		_rentHouse(){
			this.typesOfHouseSource = 3
			this.newHouse = false
			this.secondHouse = false
			this.rentHouse = true
			this.type_of_house_source = 3
			if(this.isVerified == true){
				this.getHouseListByInviter()
			}else{
				this.getHouseListByUser()
			}
		},		
		swipeChange(e) {
			console.log('返回：', e);
		},
		swipeClick(e, item, index) {
			let { content } = e;
			let _this = this
			if (content.text === '下架') {			
				uni.showModal({
					title: '下架提醒',
					content: '当下架后房源不可被查看，确认下架？',
					success: res => {
						if (res.confirm) {
							uni.request({
							    url: store.url + '/house/takeoff',
								method: 'POST',		
								data:{
									user_id: item.list.user_id,
									house_source_id: item.list.house_source_id,
									id: item.list.house_id
								},
							    header: {
									"content-type": "application/json;charset=utf-8"						
							    },
							    success: (res) => {		
									// 删掉下架的这个产品	
									if(res.data.message == 1){
										uni.showToast({
											context: '房源已下架',											
										});
										_this.swipeList.splice(index,1)										 
									}else{
										uni.showToast({
											cotext: '操作失败',											
										});
									}												
							    },
								fail: (res)=>{
									uni.showModal({
									    title: '提示',
									    content: '访问服务器失败: ' + res.data.message
									});						
								}
							});	
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				});
			}
		},
		fnPop(item) {
			this.commit_time = item.list.commit_time
			this.verify_time = item.list.verify_time
			this.release_time = item.list.release_time
			this.content = '顶部弹出 popup';
			this.$nextTick(() => {
				this.$refs.showtip.open();
			});
		},
		fnCancel(type) {
			this.$refs.showtip.close()
		},
		fnTurnPage(type) {
			uni.navigateTo({
				url: '/pages/apply/state?param=' + encodeURIComponent(JSON.stringify(type))
			});
		},
		__turnPage(index){
			let house = this.house_message[index]
			let _url = ''
			console.log(this.type_of_house_source)
			switch(this.type_of_house_source){
				case 1:
					_url = 'house/examineNew'
				break;
				case 2:
					_url = 'house/examine'
				break;
				case 3:
					_url = 'house/examineRent'
				break;
			}

			uni.navigateTo({
				url: '/pages/' + _url + '?house=' + JSON.stringify(house)
			})
		},
		___turnPage(index){
			let house = this.house_message[index]
			let _url = ''
		
			switch(this.type_of_house_source){
				case 1:
					_url = 'house/correctNew'
				break;
				case 2:
					_url = 'house/correct'
				break;
				case 3:
					_url = 'house/correctRent'
				break;
			}

			uni.navigateTo({
				url: '/pages/' + _url + '?house=' + JSON.stringify(house)
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.page-box {
	width: 100%;
	height: 100vh;
	background: #ededed;
}

.menu-left {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 156rpx;

	text-align: center;
	font-size: 32rpx;
	color: #666;
	background: #F8F8F8;

	view {
		line-height: 112rpx;

		&.active {
			color: #fff;
			background: #f13b32;
		}
	}
}

.menu-right {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 156rpx;
	right: 0;
}

.list-menue {
	display: flex;
	background: #F8F8F8;

	view {
		display: flex;
		position: relative;
		flex: 1;
		line-height: 80rpx;
		justify-content: center;
		color: #666;

		&.active {
			color: #f13b32;
			background: #fff;

			text {
				position: relative;

				&::after {
					position: absolute;
					left: 0;
					bottom: 0;
					content: '';
					width: 100%;
					height: 2px;
					background: #f13b32;
				}
			}
		}
	}
}

.list-contain {
	position: absolute;
	top: 80rpx;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
}

.list-box {
	display: flex;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	background: #fff;
	flex-direction: column;
	justify-content: space-between;
	flex: 1;
	overflow: hidden;
	border-bottom: 1px solid #ededed;

	> view {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.5;
		font-size: 24rpx;
		color: #666;

		&.list-title {
			display: flex;
			padding: 10rpx 0;
			justify-content: space-between;
			align-items: flex-end;

			view {
				line-height: 1;
			}
		}

		view {
			font-size: 24rpx;
		}

		text {
			margin-right: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 34rpx;
			font-weight: bold;
			color: #000;

			&.more-btn {
				float: right;
				margin-right: 0;
				font-size: 24rpx;
				color: #00a1e9;
			}

			&.list-type {
				float: right;
				margin-right: 0;
				font-size: 24rpx;
				color: #f13b32;
			}
		}
	}
}

.uni-tip {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: #666;
	background-color: #fff;
	border-radius: 10px;
	text-align: center;
}

.uni-box {
	padding: 20px 30px 0;
	box-sizing: border-box;
}

.uni-tip-title {
	margin-bottom: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #333;
}

.uni-tip-group-button {
	display: flex;
	margin-top: 20px;
	padding: 15px 0;
	flex-direction: row;
	border-top: 1px solid #ededed;
}

.uni-tip-button {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #3b4144;
}

.btn-fb {
	position: fixed;
	left: 35%;
	bottom: 20px;
	width: 30%;
	z-index: 9;
}
</style>
